import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlWave extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
              .owl-wave{
                
                  width: 100%;
                  height: 100%;
                  background-color: yellow;
                  position: absolute;
                  align-items: center;
                  /*min-height: 100vh;*/
                  background-color: rgb(118, 218, 255);
                  overflow: hidden;
          
              }
              .owl-wave::before,owl-meteor::after{
              
                    content: "";
                    position: absolute;
                    left: 50%;
                    min-width: 200vw;
                    min-height: 200vw;
                    background-color: #fff;
                    animation-name: rotate;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
              }
              
           .owl-wave::before {
                bottom: 15vh;
                border-radius: 45%;
                animation-duration: 10s;
           }
         
            .owl-wave::after {
                bottom: 12vh;
                opacity: .5;
                border-radius: 47%;
                animation-duration: 10s;
            }

         
        @keyframes rotate {
            0% {
                transform: translate(-50%, 0) rotateZ(0deg);
            }
            50% {
                transform: translate(-50%, -2%) rotateZ(180deg);
            }
            100% {
                transform: translate(-50%, 0%) rotateZ(360deg);
            }
        }
                     
            </style>
        
          <div class="owl-wave">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-wave",OwlWave);

